<template>
  <view class="nav-list">
    <view v-for="(nav,i) in navList" :key="i" class="nav-item" @click="navClickHandler(nav)">
      <image :src="nav.image_src" class="nav-img"></image>
    </view>
  </view>
</template>

<script>
  export default {
    name: "home-nav",
    data() {
      return {
        navList: []
      };
    },
    methods: {
      async getNavList() {
        await uni.$http.get('/api/public/v1/home/catitems').then(res => {
          if (res.data.meta.status !== 200) {
            return uni.$showMsg()
          }
          // 3.3 请求成功，为 data 中的数据赋值
          this.navList = res.data.message
        })
      },
      navClickHandler(nav) {
        // 判断点击的是哪个 nav
        if (nav.name === '分类') {
          uni.switchTab({
            url: '/pages/cate/cate'
          })
        }
      }
    },
    created() {
      this.getNavList()
    }
  }
</script>

<style lang="scss">
  .nav-list {
    display: flex;
    justify-content: space-around;
    margin: 15rpx 0rpx;
    .nav-item {
      .nav-img {
        width: 130rpx;
        height: 140rpx;
      }
    }
  }
</style>
